import styled from '@emotion/styled';
import React from 'react';
import CardOcrItem from './CardOcrItem';

interface CardImageProps {
	name?: string;
	size: string;
	url: string;
}

interface CardOCRProps {
	images?: Array<CardImageProps>;
	cardType?: string;
	id: string;
	userRole: string;
	clientId: string;
}

const CardOCRContainer = styled.div``;

const CardOCRContent = styled.div`
	background-color: rgba(250, 250, 251, 1);
	margin: 0 14px;
`;

const CardOCRRole = styled.span`
	font-size: 12px;
	color: #666666;
	display: inline-block;
	margin: 0 0 6px 14px;
	visibility: ${(props: { userRole: string }) => (props.userRole === 'normal' ? 'hidden' : '')};
`;
const CardOCR = (props: CardOCRProps) => {
	const { images, cardType, id, userRole, clientId } = props;

	return (
		<CardOCRContainer>
			{props.userRole !== 'normal' && <CardOCRRole userRole={userRole}>{userRole}</CardOCRRole>}
			{images?.map((image, index) => {
				return (
					<CardOCRContent key={index}>
						<CardOcrItem image={image?.url} cardType={cardType!} index={index} id={id} userRole={userRole} clientId={clientId} />
					</CardOCRContent>
				);
			})}
		</CardOCRContainer>
	);
};

export default CardOCR;
